<template>
    <div class="team__wrapper">
        <div class="row g-4">
            <div class="col-md-6 col-sm-12">
                <div class="team__header">
                    <h2>认识我们的老师</h2>
                    <p class="style3">Clarity gives you the blocks & components you needto create a truly
                        professional website, landing page or admin panel for your saas
                        components you needto create a truly </p>
                    <nuxt-link to="/mentors" class="trk-btn trk-btn--rounded trk-btn--secondary1">All
                        Memebers</nuxt-link>
                </div>
            </div>

            <div v-for="(item, index) in teamList" :key="index" class="col-lg-3 col-sm-6">
                <div class="team__item">
                    <div class="team__item-inner">
                        <div class="team__item-thumb">
                            <img :src="item.avatar" alt="Team Image">
                        </div>
                        <div class="team__item-content team__item-content--style1">
                            <div class="team__item-author">
                                <h6><nuxt-link to="/mentor-details">{{ item.name }}</nuxt-link> </h6>
                                <p>{{ item.role }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        teamList: {
            type: Array,
            default: () => [],
        }
    }

}
</script>

<style></style>